| vue使用sass以及如何选择版本 | 您所在的位置：网站首页 › vue 报错 sass › vue使用sass以及如何选择版本 |
vue使用sass以及如何选择版本
|
前言
在vue项目开发过程中，难免要使用到像sass或less这样对于css的脚本语言 但是对于新手来说，如何使用却犯了难题，安装各种后各种报错等... 接下来帮你缕清思路 首先在这里暂时把sass和scss统一看成sass，结尾有说明 关系链：vue中欲想使用sass，需要下载sass-loader，sass-loader需要依托于node-sass运行，node-sass的运行环境是node，所以说需要下载sass-loader和node-sass两个包，同时node-sass要兼容node版本。 理解：以当前node版本为起点，寻找兼容的node-sass，根据node-sass版本寻找兼容的sass-loader版本，依次安装即可安然使用。(为啥以node为起点呢？因为如果sass是项目开发中途加入的话，肯定以项目为基础) node-sass版本库：github.com/sass/node-s… sass-loader版本库：github.com/webpack-con… tips：GitHub需要翻墙哦~ 具体步骤：打开命令窗口查看当前node版本 node -v 复制代码我的是v14.13.1 然后就去node-sass中查看兼容的版本，嗯...耐下心去翻一番，比如我随便点进一个v6.0.0版本 Breaking changes中写道：删除对node10的兼容，也就是node10及以下版本是不兼容的 在Features中写道：增加了对node16的兼容，也就是说node版本在11-16之间是可以使用的 我的node版本是14，所以可以使用 那接下来找对应的sass-loader版本，让我们随便点击一个11版本看看... 可以看到在Features中写道：兼容node-sass v6.0.0版本，哎嘿~ 刚好巧了不是 node兼容node-sass，node-sass兼容sass-loader 那这样的或就可以下载了 npm install --save-dev [email protected] npm install --save-dev node-sass @6.0.0 复制代码tips小技巧：一般在大版本更新后都会带上对应兼容的版本的说明，比如：v2.0.0、v5.0.1...这种大版本的更新里去找 如果你已经下载了其他版本，需要先卸载掉： npm uninstall sass-loader npm uninstall node-sass 复制代码然后安装对的版本 npm install --save-dev [email protected] npm install --save-dev node-sass @6.0.0 复制代码下载完后直接使用即可 列出几个版本的组合： sass-loader 10.1.0，node-sass 5.0.0，node 11-16 sass-loader 11.1.0，node-sass 6.0.0，node 11-16 如何全局使用scss文件需要共享某个scss文件怎么办？ 如果你使用vue-cli 3+ 或 4+ ，你需要在工程文件根目录下新建vue.config.js文件，也就是在packge.json同级目录下，并添加以下代码: 方法一：使用css模块化在vue.config.js中添加： // vue.config.js module.exports = { css: { loaderOptions: { // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效 // 因为 `scss` 语法在内部也是由 sass-loader 处理的 // 但是在配置 `additionalData` 选项的时候 // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号 // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置 scss: { additionalData: `@import "~@/assets/styles/index.scss";` }, } } } 复制代码参考：cli.vuejs.org/zh/guide/cs… 注意！这里有坑，已填上： 由于sass-loader版本不同，loaderOptions中additionalData的键名也不同！！！ sass-loader v8-，这个版本之前的键名是：data sass-loader v8，这个版本后的键名是：prependData sass-loader v10+，这个版本之后的键名是：additionalData 因为现在已经在全局注入了，所以就不要再main.js或其他地方引用了，会报错哦~ 方法二：借助style-resources-loader插件 npm i style-resources-loader -D 复制代码在vue.config.js中添加： // vue.config.js module.exports = { chainWebpack: (config) => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach((item) => { item.use('sass-resources-loader') .loader('sass-resources-loader') .options({ // 引入一个全局sass文件 // resources: './src/assets/styles/common.scss', // 引入多个全局sass文件 resources: [ './src/assets/styles/index.scss', ], }) .end() }) }, } 复制代码 拓展：sass与scss区别简而言之，sass之前的语法并不是现在这样，是靠缩进符，没有大括号，与css语法差别较大，而后为了缩小与css语法的差异，在2010年5月引入scss全新语法，为了缩小与css之间的差异，而后便是现在用的这般。换句粗浅的话说sass便是scss的前身。 sass与scss区别参考链接：blog.csdn.net/culi4814/ar… |
【本文地址】